<template>
  <div class="stay-info-container">
    <van-tabs v-model="active" color="#3378ff">
      <van-tab title="工单处理" v-if="ifType === 3">
        <div class="handle-content-box">
          <div class="handle-content scroll-box">
            <div>
              <div class="add-name-box">
                <span class="app-form-red">*</span>
                <span class="add-name-text">处理说明</span>
              </div>
              <van-field
                v-model="handleExplain"
                type="textarea"
                placeholder="请输入"
                rows="1"
                autosize
                maxlength="100"
                error-message=""
              />
            </div>
            <div class="parts-box">
              <div class="handle-parts-box">
                <span class="add-name-text">配件清单</span>
                <p class="all-delete color-primary" @click="onAllDeleteAcces()">全部清空</p>
              </div>
              <div class="parts-all">
                <div class="single-acces">
                  <div>
                    <p class="parts-name-text">配件名称配件名称</p>
                    <p class="parts-id-text">编号：SW125140014</p>
                  </div>
                  <div>
                    <van-stepper v-model="value" min="0" @minus="onPartsMinus()" />
                  </div>
                </div>
                <van-button plain type="info" size="small">选择配件</van-button>
              </div>
            </div>
          </div>
          <div class="parts-button-margin">
            <van-button block type="info">确 定</van-button>
          </div>
        </div>
      </van-tab>
      <van-tab title="工单流转">
        <WorkOrderFlow :workOrderFlowData="detailList" />
      </van-tab>
      <van-tab title="工单详情">
        <div class="stay-info-box">
          <div class="stay-info-content scroll-box">
            <div class="info-top-box">
              <div class="info-content-box info-border">
                <div class="info-content-left">工单编号</div>
                <div class="info-content-reight">{{ detailList.order_no }}</div>
              </div>
            </div>

            <div class="info-conter-box">
              <div class="info-content-box info-border">
                <div class="info-content-left">设备名称</div>
                <div class="info-content-reight">{{ detailList.device_name }}</div>
              </div>
              <div class="info-content-box info-border">
                <div class="info-content-left">设备编号</div>
                <div class="info-content-reight">{{ detailList.device_number }}</div>
              </div>

              <div class="info-content-box info-border">
                <div class="info-content-left">合同编号</div>
                <div class="info-content-reight">{{ detailList.project_contract }}</div>
              </div>
              <div class="info-content-box info-border">
                <div class="info-content-left">产线编号</div>
                <div class="info-content-reight">{{ detailList.product_line_number }}</div>
              </div>
              <div class="info-content-box info-border">
                <div class="info-content-left">产线识别号</div>
                <div class="info-content-reight">{{ detailList.identification_number }}</div>
              </div>
              <div class="info-content-box info-border">
                <div class="info-content-left">设备地址</div>
                <div class="info-content-reight">{{ detailList.address }}</div>
              </div>
              <div class="info-content-box info-border">
                <div class="info-content-left">所属公司</div>
                <div class="info-content-reight">{{ detailList.customer }}</div>
              </div>
            </div>

            <div class="info-bottom-box">
              <div class="info-content-box info-border">
                <div class="info-content-left">现场联系人</div>
                <div class="info-content-reight">{{ detailList.contacts }}</div>
              </div>
              <div class="info-content-box info-border">
                <div class="info-content-left">联系电话</div>
                <div class="info-content-reight">
                  {{ detailList.contacts_tel }}
                  <a :href="'tel:' + detailList.contacts_tel" class="float-tel"
                    ><i class="iconfont icondianhua color-primary"></i
                  ></a>
                </div>
              </div>
            </div>
          </div>

          <div class="button-margin" v-show="ifType === 2">
            <van-button block type="info" @click="onComeOrder(detailList.id)">接 单</van-button>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Tab, Tabs, Button, Dialog, Field, Stepper } from 'vant';
import { getOrderDetails, receiveOrder } from '@/api/maintenanceEngineer';
import WorkOrderFlow from '../components/WorkOrderFlow.vue'; //工单流转
export default {
  name: 'MaintNoticeWorkDetail',
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Button.name]: Button,
    [Dialog.Component.name]: Dialog.Component,
    [Field.name]: Field,
    [Stepper.name]: Stepper,
    WorkOrderFlow
  },
  data() {
    return {
      active: 2,
      handleExplain: '', //处理说明
      ifType: '',
      detailList: {}, //详情数据
      sourceType: ['直接填报', '转换工单', '上报工单'] //1直接填报  2故障记录或保养计划转换  3上报工单
    };
  },
  mounted() {
    this.ifType = parseInt(this.$route.query.typePage);
    this.onDetailList();
  },
  methods: {
    //详情接口数据
    onDetailList() {
      if (this.$checkBtnPermission('maintenanceCenter:maintenanceNotice:list:detail')) {
        getOrderDetails({ id: this.$route.query.id }).then(res => {
          // this.detailList = res.data;
          res.data.processing_list.map(item => {
            item.operate_content = item.operate_content === '' ? [] : JSON.parse(item.operate_content);
            if (item.operate_content.length > 0) {
              item.operate_content.map((contentItem, index) => {
                if (contentItem.content.substring(0, 1) === '[') {
                  //判断字符串第一个是不是[
                  contentItem.content = JSON.parse(contentItem.content);
                }
              });
            }
          });
          this.detailList = res.data;
        });
      } else {
        this.$toast(this.$store.state.noDetailPermissionText);
      }
    },

    //接单
    onComeOrder(valId) {
      receiveOrder({ id: valId }).then(res => {
        this.ifType = 0;
      });
      Dialog.confirm({
        title: '接单成功',
        confirmButtonText: '处理工单',
        confirmButtonColor: '#3378FF',
        cancelButtonText: '关闭',
        message: '工单（202104130001）已接单成功，请及时进行处理.'
      })
        .then(() => {})
        .catch(() => {
          // on cancel
        });
    },
    //工单处理-清空配件
    onAllDeleteAcces() {
      Dialog.confirm({
        title: '提示',
        confirmButtonText: '确认',
        confirmButtonColor: '#3378FF',
        cancelButtonText: '取消',
        message: '确定清空全部配件？'
      })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    },
    //工单处理-单个删除配件
    onPartsMinus() {
      Dialog.confirm({
        title: '提示',
        confirmButtonText: '确认',
        confirmButtonColor: '#3378FF',
        cancelButtonText: '取消',
        message: '配件数量减少到0将删除此配件，你确定删除此配件？'
      })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.stay-info-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  ::v-deep .van-tabs {
    display: flex;
    flex-direction: column;
    height: 100%;

    .van-tabs__wrap {
      flex-shrink: 0;
    }

    .van-tabs__content {
      flex: 1;
      height: 0;

      .van-tab__pane {
        width: 100%;
        height: 100%;
      }
    }
  }
}

//工单处理
.handle-content-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: #fff;
  margin-top: 0.213333rem;
}
.handle-content {
  flex: 1;
  padding-bottom: 0.213333rem;
}
.app-form-red {
  color: #f56c6c;
  font-size: 0.32rem;
}
.add-name-box {
  margin-left: 0.426667rem;
}
.add-name-text {
  color: #666666;
  font-size: 0.32rem;
}
.parts-box {
  padding: 0.213333rem 0.426667rem;
}
.handle-parts-box {
  display: flex;
  justify-content: space-between;
}
.all-delete {
  font-size: 0.32rem;
}
.parts-all {
  padding-top: 0.426667rem;
}
.single-acces {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.426667rem;
}
.parts-name-text {
  font-size: 0.373333rem;
}
.parts-id-text {
  font-size: 0.32rem;
  color: #999999;
  margin-top: 0.266667rem;
}
//工单处理确定按钮
.parts-button-margin {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.92rem;
  padding: 0 0.426667rem;
  background-color: #fff;
}

::v-deep .van-field__value {
  border-bottom: 1px solid #f2f6fc;
}

//详情
.stay-info-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.stay-info-content {
  flex: 1;
  padding-bottom: 0.213333rem;
}
.info-top-box {
  width: 100%;
  // height: 3.653333rem;
  background-color: #fff;
  padding: 0px 0.426667rem;
  margin-top: 0.213333rem;
}
.info-conter-box {
  width: 100%;
  // height: 9.786667rem;
  background-color: #fff;
  padding: 0px 0.426667rem;
  margin-top: 0.213333rem;
}
.info-bottom-box {
  width: 100%;
  height: 2.426667rem;
  background-color: #fff;
  padding: 0px 0.426667rem;
  margin-top: 0.213333rem;
}

.info-content-box {
  width: 100%;
  min-height: 1.226667rem;
  display: flex;
  padding-top: 0.453333rem;
}
.info-content-left {
  width: 1.92rem;
  color: #999999;
  font-size: 0.373333rem;
  min-width: 1.92rem;
  white-space: nowrap;
}
.info-content-reight {
  color: #333333;
  font-size: 0.373333rem;
  margin-left: 0.426667rem;
  width: 7.733333rem;
}
.info-border {
  border-bottom: 1px solid #f2f6fc;
}
.float-tel {
  float: right;
}

//接单按钮
.button-margin {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.493333rem;
  padding: 0 0.426667rem;
  background-color: #fff;
}
::v-deep .van-button {
  border-radius: 0.106667rem;
}
</style>
